<template>
	<view class="pages">
		<!-- 搜索功能 -->
		<view class="uni-search-box">
			<uni-search-bar @confirm="searchClick" placeholder="输入姓名搜索" v-model="keyword" @clear="searchClear" @cancel="searchClear">
						</uni-search-bar>
		</view>
		
		<uni-list class="uni-list" :border="false" :style="{height:listHight}">
			<!-- 作用于app端nvue页面的下拉加载 -->
			<!-- #ifdef APP-NVUE -->
			<refreshBox @refresh="refresh" :loading="loading"></refreshBox>
			<!-- #endif -->
		
			<!-- 列表渲染 -->
			<uni-list-item :to="'/pages/index/detail?id='+item.id" v-for="(item,index) in list" :key="index" showArrow >
				<template v-slot:body>
					<view class="main">
						<text class="title">{{item.chepaihao}} - {{item.xingming}}</text>
						<view class="info">
							<text class="author">{{item.chexing}} </text>
							<uni-dateformat class="last_modify_date" :date="item.riqi"
								format="yyyy-MM-dd" :threshold="[60000, 2592000000]" />
						</view>
					</view>
				</template>
			</uni-list-item>
			<!-- 加载状态：上拉加载更多，加载中，没有更多数据了，加载错误 -->
			<!-- #ifdef APP-PLUS -->
			<uni-list-item>
				<template v-slot:body>
			<!-- #endif -->
					<uni-load-state @networkResume="refresh" :state="{loading, hasMore}"
						@loadMore="loadMore">
					</uni-load-state>
			<!-- #ifdef APP-PLUS -->
				</template>
			</uni-list-item>
			<!-- #endif -->
		</uni-list>
		
	</view>
</template>

<script>
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
	export default {
			components: {
				statusBar
			},
			
			data() {
				return {
					keyword:'',
					showRefresh: false,
					listHight: 0,
					list:[],
					loading:false,
					hasMore: true,
					postDate:{
						xingming:"",
						pageNo:1,
						pageSize:10
					},
					total:0,	// 总条数
					pages: 2, // 总页数
				}
			},
			
			async onReady() {
				// #ifdef APP-NVUE
				/* 可用窗口高度 - 搜索框高 - 状态栏高 */
				this.listHight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50 + 'px';
				// #endif
				// #ifndef APP-NVUE
				this.listHight = 'auto'
				// #endif
			},
			async onShow() {
				
				// uni.hideLoading()
				this.loadMore()
			},
			methods: {
				
				//点击搜索框
				searchClick(e) { 
					this.resetData()
					this.postDate.xingming = e.value
					this.loadMore()
					/* uni.hideKeyboard();
					uni.navigateTo({
						url: '/pages/list/search/search',
						animationType: 'fade-in'
					}); */
				},
				
				// 取消搜索
				searchClear(){
					this.resetData()
					this.loadMore()
				},
				
					// 下拉刷新
				refresh() {
					this.resetData()
					this.loadMore()
				},
				
				// 数据还原
				resetData(){
					this.hasMore = true
					this.list = []
					this.postDate.xingming = ""
					this.postDate.pageNo = 1
				},
				
				// 加载更多
				loadMore() {
					this.loading = true
					console.log("this.postDate", this.postDate)
					this.$api.bxtzList(this.postDate).then(res=>{
						console.log("res",res)
						this.loading = false
						this.total = res.total;
						this.list = [...this.list, ...res.records];
						this.pages = res.pages
						
						if(this.postDate.pageNo >= this.pages){
							this.hasMore = false
						}else{
							this.postDate.pageNo++
						}
						uni.stopPullDownRefresh()
						// #ifdef APP-NVUE
						this.showRefresh = false
						// #endif
						console.log('end');
					})
				},
			
				onpullingdown(e) {
					this.showRefresh = true
					if(e.pullingDistance>100){
						this.refresh()
					}
				}
			},
			// #ifndef APP-NVUE
			onPullDownRefresh() {
				this.refresh()
			},
			onReachBottom() {
				this.loadMore()
			}
			// #endif
		}
	</script>
	
	<style scoped>
		/* #ifndef APP-NVUE */
		view {
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
		}
		/* #endif */
		.main {
			justify-content: space-between;
			flex: 1;
		}
		.info {
			flex-direction: row;
			justify-content: space-between;
		}
	
		.author,
		.last_modify_date {
			font-size: 14px;
			color: #999999;
		}
	
		.uni-search-box {
			background-color: #FFFFFF;
			position: sticky;
			height: 50px;
			top: 0;
			left: 0;
			/* #ifndef APP-PLUS */
			z-index: 9;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			width: 580rpx;
			/* #endif */
		}
		.cover-search-bar {
			height: 50px;
			position: relative;
			top: -50px;
			margin-bottom: -50px;
			/* #ifndef APP-NVUE */
			z-index: 999;
			/* #endif */
		}
	</style>
	
